import React, { useEffect, useRef, useState } from 'react';
import MonacoEditor from 'react-monaco-editor';
import HelmTemplateCompletionProvider from './HelmTemplateCompletionProvider';
import { HELM_TEMPLATE_LANGUAGE, HELM_TEMPLATE_LANGUAGE_CONF } from './HelmTemplateLanguage';
import { TplHoverProvider } from './TplHoverProvider';
import './index.scss';
import { requireConfig } from 'components/editor';

const HELM_LANGUAGE = 'helm';
// 为了聚焦事件的中间变量，接收editorDidMount的editor值
let editorFocusTem;
const headerChar = '';
function HelmTemplateEditor({
  changeEditorFocusObj,
  changehistoryListisShow,
  headerModeStatus,
  placeholderIsShow,
  placeholder,
  value,
  editorStyle,
  readonly,
  onChange,
}) {
  const provider = useRef(null);
  const [didMount, setDidMount] = useState(false);
  useEffect(() => {
    if (window.__registerMonacoCompletionItemProvider || !didMount) return;
    const { languages } = window.monaco;
    const htcp = new HelmTemplateCompletionProvider(headerChar);
    languages.register({ id: HELM_LANGUAGE });
    languages.setMonarchTokensProvider(HELM_LANGUAGE, HELM_TEMPLATE_LANGUAGE);
    languages.setLanguageConfiguration(HELM_LANGUAGE, HELM_TEMPLATE_LANGUAGE_CONF);
    languages.registerCompletionItemProvider(HELM_LANGUAGE, htcp);
    languages.registerHoverProvider(HELM_LANGUAGE, new TplHoverProvider());
    window.__registerMonacoCompletionItemProvider = true;
    provider.current = htcp;
  }, [didMount]);

  const editorDidMount = (editor) => {
    const { monaco } = window;
    setDidMount(true);
    editor.focus();
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_F, () => {}); // 取消command+F
    editor.onDidFocusEditorWidget(() => {
      changehistoryListisShow(true);
    });
    editor.onDidBlurEditorWidget(() => {
      changehistoryListisShow(false);
    });
    editorFocusTem = editor;
    changeEditorFocusObj(editorFocusTem);
    editor?.setPosition({ column: value.length + 1, lineNumber: 1 });
  };
  const language = headerModeStatus === 'grammar' ? HELM_LANGUAGE : '';

  return (
    <div style={{ ...editorStyle, width: 644, position: 'relative' }}>
      {placeholderIsShow && (
        <p className="placeholder_p" onClick={() => editorFocusTem.focus()}>
          {placeholder}
        </p>
      )}
      <MonacoEditor
        height="30"
        editorDidMount={editorDidMount}
        value={value}
        language={didMount ? language : ''}
        theme="vs-light"
        onChange={onChange}
        requireConfig={requireConfig}
        options={{
          wordWrap: 'off',
          overviewRulerLanes: 0,
          hideCursorInOverviewRuler: true,
          overviewRulerBorder: false,
          scrollbar: {
            vertical: 'hidden',
            horizontal: 'hidden',
            handleMouseWheel: false,
          },
          lineNumbers: 'off',
          glyphMargin: false,
          folding: false,
          selectOnLineNumbers: true,
          readOnly: readonly,
          minimap: { enabled: false },
          fontSize: 14,
          tabSize: 1000000, // 缩进字符数
        }}
      />
    </div>
  );
}

export default HelmTemplateEditor;
